<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head >

  <title>GHOST BUTTON</title>
  <meta charset="utf-8">

  <style>
	* {
		margin: 0;
		padding: 0;
	}
	
	#main {
		position: relative;
	}
	
	.pin {
		float: left;
		margin: 2px 2px;
	}
	
	.box {
		padding: 5px 5px;
		border: 1px solid #ccc;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 0 6px #ccc;
	}
	
	.box img {
		width: 300px;
		height: auto;
	}
  </style>
  
</head>
<body id="main">
<div class="pin">
	<div class="box">
		<img src="a.png">
	</div>
</div>
<div class="pin">
	<div class="box">
		<img src="m.jpg">
	</div>
</div>
<div class="pin">
	<div class="box">
		<img src="m.jpg">
	</div>
</div>
<div class="pin">
	<div class="box">
		<img src="a.png">
	</div>
</div>
<div class="pin">
	<div class="box">
		<img src="m.jpg">
	</div>
</div>
<div class="pin">
	<div class="box">
		<img src="a.png">
	</div>
</div>
<div class="pin">
	<div class="box">
		<img src="a.png">
	</div>
</div>
<div class="pin">
	<div class="box">
		<img src="a.png">
	</div>
</div>
<div class="pin">
	<div class="box">
		<img src="m.jpg">
	</div>
</div>
<div class="pin">
	<div class="box">
		<img src="a.png">
	</div>
</div>
<div class="pin">
	<div class="box">
		<img src="a.png">
	</div>
</div>
<div class="pin">
	<div class="box">
		<img src="a.png">
	</div>
</div>
<div class="pin">
	<div class="box">
		<img src="m.jpg">
	</div>
</div>
<div class="pin">
	<div class="box">
		<img src="a.png">
	</div>
</div>
<div class="pin">
	<div class="box">
		<img src="a.png">
	</div>
</div>
<!-- jquery cdn baidu -->
<script src="https://libs.cdnjs.net/jquery/1.10.0/jquery.min.js"></script>
<script src="waterfull.js"></script>
</body>
</html>
